<template>
  <transition name="fade" appear>
    <div class="information" v-drag>
      <div class="title">
        <span>消息通知</span>
        <off-btn @off="$emit('off')"></off-btn>
      </div>
      <div class="content" @mousedown.stop>
        <div class="nav">
          <span @click="nav=1" :class="{active: nav==1}">系统通知({{systemLook}})</span>
          <span @click="nav=2" :class="{active: nav==2}">私信({{letterLook}})</span>
        </div>
        <div class="view">
          <system-informs @remove="send" :systemInforms="systemInforms" v-show="nav==1"></system-informs>
          <private-letter @remove="send" :letterInforms="letterInforms" v-show="nav==2"></private-letter>
        </div>
      </div>
    </div>
  </transition>
  
</template>

<script>
import offBtn from "../offBtn.vue"
import systemInforms from "./systemInforms.vue"
import SystemInforms from "./systemInforms.vue"
import privateLetter from "./privateletter.vue"
import PrivateLetter from "../../user/attention/privateLetter.vue";
import { mapMutations } from 'vuex'
export default {
  name: 'Information',

  data() {
    return {
      socket: null, // Websocket连接
      nav: 1, // 导航菜单索引
      systemInforms: [], // 系统消息展示数据集
      letterInforms: [], // 私信消息展示数据集
      timer: null, // 发送定时器
      count: 0 // 判断是否新增未读消息
    };
  },

  computed: {
    // 统计系统未读消息
    systemLook(){
      return this.systemInforms.filter(v => v.islook == 0).length
    },
    // 统计私信未读
    letterLook(){
      return this.letterInforms.filter(v => v.islook == 0).length
    },
    // 统计未读信息
    isLook(){
      return this.systemLook + this.letterLook
    }
  },

  mounted() {
    this.init()
  },

  destroyed(){
    clearInterval(this.timer)
    this.timer = null
    this.socket.close()
    this.socket = null
  },

  methods: {
    // 初始化
    init(){
      this.socket = this.$websocket.getSystemInforms()
      this.socket.onclose = () => {
        clearInterval(this.timer)
        this.timer = null
      }
      this.socket.onmessage = (e) => {
        let data = JSON.parse(e.data)
        //console.log(data)
        if(data instanceof Object){
          this.systemInforms = data.informs
          this.letterInforms = data.letters
          if(data.invites instanceof Object && data.invites != null){
            this.showConfirm(data.invites)
          }
        }
      }
      this.socket.onerror = () => {
        this.showLoading('连接断开,正在重新连接!')
        setTimeout(() => {
          this.init()
          this.hideLoading()
        },3000)
      }
      this.timer = setInterval(this.send,2000)
    },
    // 发送心跳
    send(){
      if(this.$store.state.isLogin && this.socket.readyState == 1){
        this.socket.send('ws')
        if(this.count != this.isLook){
          this.$emit('informsCount',this.isLook)
          this.count = this.isLook
        }
      }
    },
    ...mapMutations(['showLoading','hideLoading','showConfirm'])
  },

  components: {
    offBtn,
    systemInforms,
    SystemInforms,
    privateLetter,
    PrivateLetter
}
};
</script>

<style scoped>
.information{
  width: 50%;
  max-width: 500px;
  min-width: 320px;
  background-color: white;
  border: 1px solid gray;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 4px 2px gray;
  border-radius: 3px;
  display: f;
  z-index: 999;
}
.title{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  background-color: gray;
  color: white;
  font-size: 0.8rem;
}
.title .off{
  position: absolute;
  top: 4px;
  right: 5px;
}
.content{
  display: flex;
}
.content .nav{
  width: 100px;
}
.content .nav{
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  align-items: center;
  height: 300px;
}
.content .view{
  overflow: hidden;
}
.content .nav .active{
  background-color: #ececec;
  color: green;
  border-right: none;
}
.content .nav span{
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: gray;
  cursor: pointer;
  text-align: center;
  transition: all .3s ease;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
}
.content .view{
  flex: 1;
  background-color: #ececec;
}
</style>